<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">


    <h:head>

        <title>SHUCKAPP-a donde ir?</title>
        <link rel="stylesheet" type="text/css" href="/Shuckapp/recursos/css/estilos.css" />        
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript" ></script>

    </h:head>   
    
    <h:body>
        <p:graphicImage value="/recursos/imagenes/logo_shuckapp.png" width="200px"  height="100px"/>
        <!--
        <span class="title"> Lugares en la U</span>
        -->
        <p:panel  styleClass="cuerpo">
            <h:form id="fr_menu">
                <p:stack icon="/recursos/imagenes/icon_menu.png" expanded="true" closeSpeed="30" id="menu">
                    <c:forEach items="#{bmenuInicio.menus}" var="link">
                        <p:menuitem  value="#{link.titulo}"  url="#{link.outcome} "  icon="#{link.icon}"    />  
                    </c:forEach>
                </p:stack>
                <p:draggable for="menu"  />            
            </h:form>
        </p:panel>
        <br/>
        <h:form>  
            <p:panelGrid columns="2" id="busqueda">            
            <p:gmap id="gmap" center="14.587749, -90.552853" zoom="18" type="HYBRID" 
                    model="#{mapaBean.model}" style="width:700px; height:500px;" > 
                
                <p:ajax event="overlaySelect" update="out" listener="#{mapaBean.onMarkerSelect}"/>
                
                <p:gmapInfoWindow>
                    <h:outputText value="#{mapaBean.marcador.title}"/>                    
                </p:gmapInfoWindow>
                              
                
            </p:gmap>                 
                <p:panel id="out" header="Restaurante" style="margin-bottom:20px; width:80%;">
                    <!--
                    <h:outputText value="#{mapaBean.res.nombre}" style="font-weight: bold"/>
                    <br/>
                    <h:outputText value="#{mapaBean.res.codigo}" style="font-weight: bold"/>
                    -->
                    <p:fieldset style="margin-bottom:20px">
                        <h:outputText value="Nombre:" style="font-weight: bold"/> 
                        <br/>
                        <h:outputText value="#{mapaBean.res.nombre}" />                        
                    </p:fieldset>
                    <p:fieldset style="margin-bottom:20px">
                        <h:outputText value="Ubicación" style="font-weight: bold"/>
                        <br/>
                        <h:outputText value="#{mapaBean.res.ubicacion}" />                        
                    </p:fieldset>
                    
                    <p:fieldset style="margin-bottom:20px">
                        <h:outputText value="Puntuación" style="font-weight: bold"/>  
                        <br/>
                        <h:outputText value="#{mapaBean.res.puntuacionString}"/>                        
                    </p:fieldset>
                    
                    <p:fieldset style="margin-bottom:20px">
                    <p:button outcome="menu" value="Ver detalles">
                        <f:param name="marker" value="#{mapaBean.res.codigo}"/>
                    </p:button>
                     </p:fieldset>
                    <p:fieldset style="margin-bottom:20px">
                    <p:button outcome="comentarios" value="Puntuar">
                        <f:param name="marker" value="#{mapaBean.res.codigo}"/>
                    </p:button>
                     </p:fieldset>
                    
                        
                    
                </p:panel>             
                
                <!--
                
                -->
            </p:panelGrid>
        </h:form>



    </h:body>
</html>
